<template>
	<view class="body">
		<view class="li">
			<view class="label">昵称</view>
			<view class="value">
				<input type="text" v-model="userInfo.nickname">
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="li">
			<view class="label">头像</view>
			<view class="value" @click="handleUpload">
				<view class="head">
					<image :src="userInfo.avatar"></image>
				</view>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="li">
			<view class="label">性别</view>
			<view class="value" @click="handleSex">
				<text v-if="userInfo.gender == 'male'">男</text>
				<text v-if="userInfo.gender == 'female'">女</text>
				<text v-if="userInfo.gender == 'secrecy'">保密</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="li li_">
			<view class="label">自我介绍</view>
			<view class="value">
				<textarea placeholder="自我介绍" v-model="userInfo.introduce"></textarea>
			</view>
		</view>
		<view class="submit" @click="handleSubmit">提交</view>
		<u-select v-model="showModel" :list="modelList" @confirm="handleConfirm"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import App from '@/App.vue'
	export default {
		data() {
			return {
				showModel: false,
				userInfo: {
					nickname: "",
					avatar: "",
					gender: "",
					introduce: "",
				},
				modelList: [{
						value: 'secrecy',
						label: '保密'
					},
					{
						value: 'male',
						label: '男'
					},
					{
						value: 'female',
						label: '女'
					}
				],
			};
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.info)
		},
		methods: {
			handleSex() {
				this.showModel = true
			},
			//性别
			handleConfirm(e) {
				console.log(e)
				if(e[0].value == 'secrecy'){
					this.userInfo.gender = ""
				}else{
					this.userInfo.gender = e[0].value
				}
			},
			//上传头像
			handleUpload() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'],
					success(res) {
						uni.showLoading({
							title: "正在上传……",
						});
						uni.uploadFile({
							url: App.globalData.requestUrl + '/api/resource/upload/',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'category': 'image'
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								let imageUrl = JSON.parse(uploadFileRes.data).result.path
								console.log(imageUrl);
								that.userInfo.avatar = App.globalData.requestUrl + '/media/' + imageUrl
								// that.getImg(imageUrl)
							}
						});
					}
				});
			},
			//获取图片
			// getImg(imageUrl){
			// 	this.$Api.getImg(imageUrl).then(res => {
			// 		console.log('获取图片', res)
			// 		this.userInfo.avatar = res
			// 	}, err => {
			// 		console.log(err)
			// 	})
			// },
			//提交
			handleSubmit() {
				let rid = this.userInfo.rid
				this.$Api.editUserInfo(rid,this.userInfo).then(res => {
					// console.log('提交', res)
					if(res.msg == '操作成功'){
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						})
						uni.navigateBack()
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				}, err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 94%;
		margin: 0 auto;

		.li {
			width: 100%;
			padding: 30upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #e5e5e5;

			&.li_ {
				flex-wrap: wrap;
				border-bottom: none;

				.label {
					width: 100%;
				}

				.value {
					width: 100%;
					margin-top: 20upx;

					textarea {
						width: 100%;
						height: 200upx;
						border-radius: 10upx;
						border: 2upx solid #e5e5e5;
						color: #414141;
						font-size: 28upx;
						padding: 20upx;
					}
				}
			}

			.label {
				font-size: 28upx;
				color: #999;
			}

			.value {
				font-size: 28upx;
				color: #414141;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				input {
					font-size: 28upx;
					color: #414141;
					border: none;
					outline: none;
					background: none;
					text-align: right;
					margin-right: 10upx;
				}

				.head {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 10upx;

					image {
						width: 100%;
						height: 100%;
						display: block;
						margin: 0 auto;
					}
				}

				text {
					margin-right: 10upx;
				}
			}
		}

		.submit {
			width: 94%;
			padding: 30upx 0;
			background: #4094ff;
			border-radius: 60upx;
			text-align: center;
			color: #fff;
			position: fixed;
			bottom: 30upx;
			left: 3%;
			z-index: 99;
		}
	}
</style>